<!DOCTYPE html>
<html lang=zh>
<head>
    <!-- so meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="HandheldFriendly" content="True">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="description" content="在Angular 2 中的组件（一）知道了怎么创建组件，以及怎样使用组件，但是组件渲染的是一个静态的模板，这就比较单调没有趣味了。
下面使用组件在浏览器中展示用户名的列表。需要两个组件单个用户组件以及用户列表组件。
用户组件示例使用下面命令创建用户组件，命令如下：1ng generate component user-item
将标签添加到app.component.html中。如下：12345">
<meta property="og:type" content="article">
<meta property="og:title" content="Angular 2 中的组件（二）">
<meta property="og:url" content="http://www.sithome.vip/2017/02/04/angular2-component-2/index.html">
<meta property="og:site_name" content="SitHome">
<meta property="og:description" content="在Angular 2 中的组件（一）知道了怎么创建组件，以及怎样使用组件，但是组件渲染的是一个静态的模板，这就比较单调没有趣味了。
下面使用组件在浏览器中展示用户名的列表。需要两个组件单个用户组件以及用户列表组件。
用户组件示例使用下面命令创建用户组件，命令如下：1ng generate component user-item
将标签添加到app.component.html中。如下：12345">
<meta property="og:updated_time" content="2017-02-07T03:53:05.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Angular 2 中的组件（二）">
<meta name="twitter:description" content="在Angular 2 中的组件（一）知道了怎么创建组件，以及怎样使用组件，但是组件渲染的是一个静态的模板，这就比较单调没有趣味了。
下面使用组件在浏览器中展示用户名的列表。需要两个组件单个用户组件以及用户列表组件。
用户组件示例使用下面命令创建用户组件，命令如下：1ng generate component user-item
将标签添加到app.component.html中。如下：12345">
    
    
        
          
              <link rel="shortcut icon" href="/images/favicon.ico">
          
        
        
          
            <link rel="icon" type="image/png" href="/images/favicon-192x192.png" sizes="192x192">
          
        
        
          
            <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
          
        
    
    <!-- title -->
    <title>Angular 2 中的组件（二）</title>
    <!-- styles -->
    <link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/lib/meslo-LG/styles.css">
    <link rel="stylesheet" href="/lib/justified-gallery/justifiedGallery.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <!-- rss -->
    
    
    <!-- jquery -->
    <script src="/lib/jquery/jquery.min.js"></script>
</head>

<body>
    
      <div id="header-post">
  <a id="menu-icon" href="#"><i class="fa fa-bars fa-lg"></i></a>
  <a id="menu-icon-tablet" href="#"><i class="fa fa-bars fa-lg"></i></a>
  <a id="top-icon-tablet" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');" style="display:none;"><i class="fa fa-chevron-up fa-lg"></i></a>
  <span id="menu">
    <span id="nav">
      <ul>
        
          <li><a href="/">主页</a></li>
        
          <li><a href="/about/">关于</a></li>
        
          <li><a href="/archives/">文章</a></li>
        
          <li><a href="https://git.oschina.net/sithome">码云</a></li>
        
      </ul>
    </span>
    <br/>
    <span id="actions">
      <ul>
        
        <li><a class="icon" href="/2017/02/11/angular-2-bootstrap-process/"><i class="fa fa-chevron-left" aria-hidden="true" onmouseover='$("#i-prev").toggle();' onmouseout='$("#i-prev").toggle();'></i></a></li>
        
        
        <li><a class="icon" href="/2017/01/27/angular2-component-1/"><i class="fa fa-chevron-right" aria-hidden="true" onmouseover='$("#i-next").toggle();' onmouseout='$("#i-next").toggle();'></i></a></li>
        
        <li><a class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fa fa-chevron-up" aria-hidden="true" onmouseover='$("#i-top").toggle();' onmouseout='$("#i-top").toggle();'></i></a></li>
        <li><a class="icon" href="#"><i class="fa fa-share-alt" aria-hidden="true" onmouseover='$("#i-share").toggle();' onmouseout='$("#i-share").toggle();' onclick='$("#share").toggle();return false;'></i></a></li>
      </ul>
      <span id="i-prev" class="info" style="display:none;">Previous post</span>
      <span id="i-next" class="info" style="display:none;">Next post</span>
      <span id="i-top" class="info" style="display:none;">Back to top</span>
      <span id="i-share" class="info" style="display:none;">Share post</span>
    </span>
    <br/>
    <div id="share" style="display: none">
      <ul>
  <li><a class="icon" href="http://www.facebook.com/sharer.php?u=http://www.sithome.vip/2017/02/04/angular2-component-2/"><i class="fa fa-facebook " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://twitter.com/share?url=http://www.sithome.vip/2017/02/04/angular2-component-2/&text=Angular 2 中的组件（二）"><i class="fa fa-twitter " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.linkedin.com/shareArticle?url=http://www.sithome.vip/2017/02/04/angular2-component-2/&title=Angular 2 中的组件（二）"><i class="fa fa-linkedin " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://pinterest.com/pin/create/bookmarklet/?url=http://www.sithome.vip/2017/02/04/angular2-component-2/&is_video=false&description=Angular 2 中的组件（二）"><i class="fa fa-pinterest " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="mailto:?subject=Angular 2 中的组件（二）&body=Check out this article: http://www.sithome.vip/2017/02/04/angular2-component-2/"><i class="fa fa-envelope " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://getpocket.com/save?url=http://www.sithome.vip/2017/02/04/angular2-component-2/&title=Angular 2 中的组件（二）"><i class="fa fa-get-pocket " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://reddit.com/submit?url=http://www.sithome.vip/2017/02/04/angular2-component-2/&title=Angular 2 中的组件（二）"><i class="fa fa-reddit " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.stumbleupon.com/submit?url=http://www.sithome.vip/2017/02/04/angular2-component-2/&title=Angular 2 中的组件（二）"><i class="fa fa-stumbleupon " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://digg.com/submit?url=http://www.sithome.vip/2017/02/04/angular2-component-2/&title=Angular 2 中的组件（二）"><i class="fa fa-digg " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.tumblr.com/share/link?url=http://www.sithome.vip/2017/02/04/angular2-component-2/&name=Angular 2 中的组件（二）&description="><i class="fa fa-tumblr " aria-hidden="true"></i></a></li>
</ul>

    </div>
    <div id="toc">
      <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#用户组件示例"><span class="toc-number">1.</span> <span class="toc-text">用户组件示例</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#用户列表组件示例"><span class="toc-number">2.</span> <span class="toc-text">用户列表组件示例</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#在用户列表组件中使用单个用户组件"><span class="toc-number">3.</span> <span class="toc-text">在用户列表组件中使用单个用户组件</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#修改user-list-component-html"><span class="toc-number">3.1.</span> <span class="toc-text">修改user-list.component.html</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#修改user-item-component-ts"><span class="toc-number">3.2.</span> <span class="toc-text">修改user-item.component.ts</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#再次修改user-list-component-html"><span class="toc-number">3.3.</span> <span class="toc-text">再次修改user-list.component.html</span></a></li></ol></li></ol>
    </div>
  </span>

</div>

    
    <div class="content index width mx-auto px2 my4">
        
        <article class="post" itemscope itemtype="http://schema.org/BlogPosting">
  <header>
    
    <h1 class="posttitle" itemprop="name headline">
        Angular 2 中的组件（二）
    </h1>



    <div class="meta">
      <span class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">
        <span itemprop="name">SitHome</span>
      </span>
      
    <div class="postdate">
        <time datetime="2017-02-04T07:01:56.000Z" itemprop="datePublished">2017-02-04</time>
    </div>


      

    </div>
  </header>
  

  <div class="content" itemprop="articleBody">
    <p>在<a href="http://www.sithome.vip/2017/01/27/angular2-component-1/">Angular 2 中的组件（一）</a>知道了怎么创建组件，以及怎样使用组件，但是组件渲染的是一个静态的模板，这就比较单调没有趣味了。</p>
<p>下面使用组件在浏览器中展示用户名的列表。需要两个组件单个用户组件以及用户列表组件。</p>
<h1 id="用户组件示例"><a href="#用户组件示例" class="headerlink" title="用户组件示例"></a>用户组件示例</h1><p>使用下面命令创建用户组件，命令如下：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">ng generate component user-item</div></pre></td></tr></table></figure></p>
<p>将<app-user-item></app-user-item>标签添加到app.component.html中。如下：<br><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">h1</span>&gt;</span></div><div class="line">  &#123;&#123;title&#125;&#125;</div><div class="line">  <span class="tag">&lt;<span class="name">app-hello-world</span>&gt;</span><span class="tag">&lt;/<span class="name">app-hello-world</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">app-user-item</span>&gt;</span><span class="tag">&lt;/<span class="name">app-user-item</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">h1</span>&gt;</span></div></pre></td></tr></table></figure></p>
<p>然后启动HTTP服务，浏览器访问 <a href="http://localhost:4200/" target="_blank" rel="external">http://localhost:4200/</a>确保浏览器中可以看到user-item works!</p>
<p>修改user-item.component.ts文件在UserItemComponent类中添加name属性，以及在构造函数中给name属性赋值，代码如下：<br><figure class="highlight typescript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">import</span> &#123; Component, OnInit &#125; from <span class="string">'@angular/core'</span>;</div><div class="line"></div><div class="line"><span class="meta">@Component</span>(&#123;</div><div class="line">  selector: <span class="string">'app-user-item'</span>,</div><div class="line">  templateUrl: <span class="string">'./user-item.component.html'</span>,</div><div class="line">  styleUrls: [<span class="string">'./user-item.component.css'</span>]</div><div class="line">&#125;)</div><div class="line"><span class="keyword">export</span> <span class="keyword">class</span> UserItemComponent <span class="keyword">implements</span> OnInit &#123;</div><div class="line"></div><div class="line">  name:<span class="built_in">string</span>;<span class="comment">//添加的name属性</span></div><div class="line"></div><div class="line">  <span class="keyword">constructor</span>(<span class="params"></span>) &#123;</div><div class="line">    <span class="keyword">this</span>.name=<span class="string">"Sithome"</span>;<span class="comment">//构造函数中给name属性赋值</span></div><div class="line">  &#125;</div><div class="line"></div><div class="line">  ngOnInit() &#123;</div><div class="line">  &#125;</div><div class="line"></div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>修改user-item.component.html,内容如下：<br><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span></div><div class="line">  &#123;&#123;name&#125;&#125;</div><div class="line"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></div></pre></td></tr></table></figure></p>
<p>上面代码使用了模板标签{{}}，因为模板和组件绑定着，渲染模板时标签中的name将会被组件中name的属性值替代。</p>
<p>刷新浏览器验证上面的修改是否起作用。页面展示如下：<br><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">app works!</div><div class="line"></div><div class="line">hello-world works!</div><div class="line"></div><div class="line">Sithome</div></pre></td></tr></table></figure></p>
<h1 id="用户列表组件示例"><a href="#用户列表组件示例" class="headerlink" title="用户列表组件示例"></a>用户列表组件示例</h1><p>上面我们创建了组件来展示单个用户，下面创建一个用户列表组件来展示用户名列表。使用下面命令创建用户列表组件，如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">ng generate component user-list</div></pre></td></tr></table></figure>
<p>替换app.component.html中的<app-user-item>标签为<app-user-list>，代码如下：</app-user-list></app-user-item></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">h1</span>&gt;</span></div><div class="line">  &#123;&#123;title&#125;&#125;</div><div class="line">  <span class="tag">&lt;<span class="name">app-hello-world</span>&gt;</span><span class="tag">&lt;/<span class="name">app-hello-world</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">app-user-list</span>&gt;</span><span class="tag">&lt;/<span class="name">app-user-list</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">h1</span>&gt;</span></div></pre></td></tr></table></figure>
<p>修改user-list.component.ts文件在UserListComponent类中添加names属性（类型是string[]），以及在构造函数中给names属性赋值，代码如下：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">import</span> &#123; Component, OnInit &#125; from <span class="string">'@angular/core'</span>;</div><div class="line"></div><div class="line"><span class="meta">@Component</span>(&#123;</div><div class="line">  selector: <span class="string">'app-user-list'</span>,</div><div class="line">  templateUrl: <span class="string">'./user-list.component.html'</span>,</div><div class="line">  styleUrls: [<span class="string">'./user-list.component.css'</span>]</div><div class="line">&#125;)</div><div class="line"><span class="keyword">export</span> <span class="keyword">class</span> UserListComponent <span class="keyword">implements</span> OnInit &#123;</div><div class="line"></div><div class="line">  names:<span class="built_in">string</span>[];</div><div class="line"></div><div class="line">  <span class="keyword">constructor</span>(<span class="params"></span>) &#123;</div><div class="line">    <span class="keyword">this</span>.names = [<span class="string">"zhangsan"</span>,<span class="string">"lisi"</span>,<span class="string">"wanger"</span>,<span class="string">"SitHome"</span>];</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  ngOnInit() &#123;</div><div class="line">  &#125;</div><div class="line"></div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>修改user-list.component.html，代码如下：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">li</span> *<span class="attr">ngFor</span>=<span class="string">"let name of names"</span>&gt;</span>&#123;&#123; name &#125;&#125;<span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></div></pre></td></tr></table></figure>
<p>在模板文件中使用了<ul>列表标签。在<li>标签中使用了*ngFor=”let name of names”命令，这个命令的作用就是：循环names数组，生成</li><li>标签列表。</li></ul></p>
<p>在终端中启动HTTP服务，访问<a href="http://localhost:4200/" target="_blank" rel="external">http://localhost:4200/</a>，页面展示结果如下：</p>
<blockquote>
<p>app works!</p>
<p>hello-world works!</p>
<ul>
<li>zhangsan</li>
<li>lisi</li>
<li>wanger</li>
<li>SitHome</li>
</ul>
</blockquote>
<h1 id="在用户列表组件中使用单个用户组件"><a href="#在用户列表组件中使用单个用户组件" class="headerlink" title="在用户列表组件中使用单个用户组件"></a>在用户列表组件中使用单个用户组件</h1><p>之前创建的单个用户组件和用户列表组件没有关联，正常的情况下，用户列表应该有多个用户组成。下面就说一下怎样把单个用户组件和用户列表组件整合到一块。需要分三步、</p>
<ol>
<li>修改user-list.component.html，在此模板中使用<app-user-item>标签</app-user-item></li>
<li>修改user-item.component.ts，使name属性可以接收外部传入的值</li>
<li>修改user-list.component.html，以便给用户组件传入name的值</li>
</ol>
<h2 id="修改user-list-component-html"><a href="#修改user-list-component-html" class="headerlink" title="修改user-list.component.html"></a>修改user-list.component.html</h2><p>代码如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">&lt;ul&gt;</div><div class="line">  &lt;app-user-item *ngFor=&quot;let name of names&quot;&gt;&lt;/app-user-item&gt;</div><div class="line">&lt;/ul&gt;</div></pre></td></tr></table></figure>
<p>浏览器刷新页面结果如下：<br><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">app works!</div><div class="line"></div><div class="line">hello-world works!</div><div class="line"></div><div class="line">    Sithome</div><div class="line"></div><div class="line">    Sithome</div><div class="line"></div><div class="line">    Sithome</div><div class="line"></div><div class="line">    Sithome</div></pre></td></tr></table></figure></p>
<p>从结果中可以看到用户列表都是相同的，这是因为单个用户组件没有接收外部传入的用户名，还是使用自己构造函数中设置的用户名。</p>
<h2 id="修改user-item-component-ts"><a href="#修改user-item-component-ts" class="headerlink" title="修改user-item.component.ts"></a>修改user-item.component.ts</h2><p>代码如下：<br><figure class="highlight typescript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">import</span> &#123; Component, OnInit, Input&#125; from <span class="string">'@angular/core'</span>;</div><div class="line"></div><div class="line"><span class="meta">@Component</span>(&#123;</div><div class="line">  selector: <span class="string">'app-user-item'</span>,</div><div class="line">  templateUrl: <span class="string">'./user-item.component.html'</span>,</div><div class="line">  styleUrls: [<span class="string">'./user-item.component.css'</span>]</div><div class="line">&#125;)</div><div class="line"><span class="keyword">export</span> <span class="keyword">class</span> UserItemComponent <span class="keyword">implements</span> OnInit &#123;</div><div class="line"></div><div class="line">  <span class="meta">@Input</span>() name:<span class="built_in">string</span>;</div><div class="line"></div><div class="line">  <span class="keyword">constructor</span>(<span class="params"></span>) &#123;&#125;</div><div class="line"></div><div class="line">  ngOnInit() &#123;</div><div class="line">  &#125;</div><div class="line"></div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>浏览器刷新页面结果如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">app works!</div><div class="line">hello-world works!</div></pre></td></tr></table></figure>
<p>从结果中发现用户列表一个用户也不显示了，这是由于user-item.component.ts的改动导致，上面的改动是name属性的值需要从外部传入，而外部没有传入值导致name属性是空。</p>
<h2 id="再次修改user-list-component-html"><a href="#再次修改user-list-component-html" class="headerlink" title="再次修改user-list.component.html"></a>再次修改user-list.component.html</h2><p>代码如下：<br><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">app-user-item</span> *<span class="attr">ngFor</span>=<span class="string">"let name of names"</span> [<span class="attr">name</span>]=<span class="string">"name"</span>&gt;</span><span class="tag">&lt;/<span class="name">app-user-item</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></div></pre></td></tr></table></figure></p>
<p>在<app-user-item>标签中我们添加了[name]=”name”属性，在Angular中[name]表示我们想传一个值给组件的name属性，具体是什么值由’”name”决定，当*ngFor命令迭代names时会把每一次的迭代的值赋给name。</app-user-item></p>
<p>浏览器刷新页面结果如下：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">app works!</div><div class="line"></div><div class="line">hello-world works!</div><div class="line"></div><div class="line">    zhangsan</div><div class="line"></div><div class="line">    lisi</div><div class="line"></div><div class="line">    wanger</div><div class="line"></div><div class="line">    SitHome</div></pre></td></tr></table></figure>
<p>到此组件的小例子已经完成，它还是比较简单的。随着慢慢的学习，写出来的Angular应用会慢慢丰富起来的。</p>

  </div>
</article>

    <div class="weixin">
      <p>欢迎关注微信SitHomeBing，互相交流学习</p>
      <p><img src="http://okhdvenip.bkt.clouddn.com/qrcode8.jpg" alt="SitHomeBing" title="微信扫二维码关注"></p>
    </div>





<!-- 多说评论框 start -->
	<div class="ds-thread" data-thread-key="2017/02/04/angular2-component-2/" data-title="Angular 2 中的组件（二）" data-url="http://www.sithome.vip/2017/02/04/angular2-component-2/"></div>
<!-- 多说评论框 end -->



    </div>
    
      <div id="footer-post-container">
  <div id="footer-post">

    <div id="nav-footer" style="display: none">
      <ul>
         
          <li><a href="/">主页</a></li>
         
          <li><a href="/about/">关于</a></li>
         
          <li><a href="/archives/">文章</a></li>
         
          <li><a href="https://git.oschina.net/sithome">码云</a></li>
        
      </ul>
    </div>

    <div id="toc-footer" style="display: none">
      <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#用户组件示例"><span class="toc-number">1.</span> <span class="toc-text">用户组件示例</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#用户列表组件示例"><span class="toc-number">2.</span> <span class="toc-text">用户列表组件示例</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#在用户列表组件中使用单个用户组件"><span class="toc-number">3.</span> <span class="toc-text">在用户列表组件中使用单个用户组件</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#修改user-list-component-html"><span class="toc-number">3.1.</span> <span class="toc-text">修改user-list.component.html</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#修改user-item-component-ts"><span class="toc-number">3.2.</span> <span class="toc-text">修改user-item.component.ts</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#再次修改user-list-component-html"><span class="toc-number">3.3.</span> <span class="toc-text">再次修改user-list.component.html</span></a></li></ol></li></ol>
    </div>

    <div id="share-footer" style="display: none">
      <ul>
  <li><a class="icon" href="http://www.facebook.com/sharer.php?u=http://www.sithome.vip/2017/02/04/angular2-component-2/"><i class="fa fa-facebook fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://twitter.com/share?url=http://www.sithome.vip/2017/02/04/angular2-component-2/&text=Angular 2 中的组件（二）"><i class="fa fa-twitter fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.linkedin.com/shareArticle?url=http://www.sithome.vip/2017/02/04/angular2-component-2/&title=Angular 2 中的组件（二）"><i class="fa fa-linkedin fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://pinterest.com/pin/create/bookmarklet/?url=http://www.sithome.vip/2017/02/04/angular2-component-2/&is_video=false&description=Angular 2 中的组件（二）"><i class="fa fa-pinterest fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="mailto:?subject=Angular 2 中的组件（二）&body=Check out this article: http://www.sithome.vip/2017/02/04/angular2-component-2/"><i class="fa fa-envelope fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://getpocket.com/save?url=http://www.sithome.vip/2017/02/04/angular2-component-2/&title=Angular 2 中的组件（二）"><i class="fa fa-get-pocket fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://reddit.com/submit?url=http://www.sithome.vip/2017/02/04/angular2-component-2/&title=Angular 2 中的组件（二）"><i class="fa fa-reddit fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.stumbleupon.com/submit?url=http://www.sithome.vip/2017/02/04/angular2-component-2/&title=Angular 2 中的组件（二）"><i class="fa fa-stumbleupon fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://digg.com/submit?url=http://www.sithome.vip/2017/02/04/angular2-component-2/&title=Angular 2 中的组件（二）"><i class="fa fa-digg fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.tumblr.com/share/link?url=http://www.sithome.vip/2017/02/04/angular2-component-2/&name=Angular 2 中的组件（二）&description="><i class="fa fa-tumblr fa-lg" aria-hidden="true"></i></a></li>
</ul>

    </div>

    <div id="actions-footer">
      <ul>
        <li id="toc"><a class="icon" href="#" onclick='$("#toc-footer").toggle();return false;'><i class="fa fa-list fa-lg" aria-hidden="true"></i> TOC</a></li>
        <li id="share"><a class="icon" href="#" onclick='$("#share-footer").toggle();return false;'><i class="fa fa-share-alt fa-lg" aria-hidden="true"></i> Share</a></li>
        <li id="top" style="display:none"><a class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fa fa-chevron-up fa-lg" aria-hidden="true"></i> Top</a></li>
        <li id="menu"><a class="icon" href="#" onclick='$("#nav-footer").toggle();return false;'><i class="fa fa-bars fa-lg" aria-hidden="true"></i> Menu</a></li>
      </ul>
    </div>

  </div>
</div>

    
    <footer id="footer">
  <div class="footer-left">
    Copyright &copy; 2017 SitHome
  </div>
  <div class="footer-right">
    <nav>
      <ul>
         
          <li><a href="/">主页</a></li>
         
          <li><a href="/about/">关于</a></li>
         
          <li><a href="/archives/">文章</a></li>
         
          <li><a href="https://git.oschina.net/sithome">码云</a></li>
        
      </ul>
    </nav>
  </div>
</footer>

    <script src="/lib/justified-gallery/jquery.justifiedGallery.min.js"></script>
<script src="/js/main.js"></script>
<!-- Google Analytics -->
<!--

    <script type="text/javascript">
        (function(i,s,o,g,r,a,m) {i['GoogleAnalyticsObject']=r;i[r]=i[r]||function() {
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
        ga('create', 'UA-86660611-1', 'auto');
        ga('send', 'pageview');
    </script>

-->
<!-- Disqus Comments -->


<!--duoshuo comments-->

  <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
  <script type="text/javascript">
  var duoshuo_shortname = 'sithome';
  var duoshuoQuery = {short_name:duoshuo_shortname};
    (function() {
      var ds = document.createElement('script');
      ds.type = 'text/javascript';ds.async = true;
      ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
      ds.charset = 'UTF-8';
      (document.getElementsByTagName('head')[0]
       || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
    </script>
  <!-- 多说公共JS代码 end -->


</body>
</html>
